<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table相关的列表渲染</title>

</head>
<body>

<div id="app">

    <h1>jquery版本的table</h1>
    <hr>
    <table id="list">

    </table>
    <hr>
    <h1>vue版本的table</h1>
    <hr>
    <table>
         <thead>
              <th v-for="col in columns">{{col.title}}</th>
         </thead>
         <tbody>
               <tr v-for="(emp,index) in data">
                    <td v-for="col in columns">
                        {{emp[col.field]}}
                    </td>
               </tr>
         </tbody>
    </table>
</div>

</body>
<script src="../../../lib/vue.global.js"></script>
<script src="../../../lib/jquery.js"></script>
<script>

    employees = [
        {
            id: 1,
            name: 'L',
            age: 34
        }, {
            id: 2,
            name: 'M',
            age: 45
        }, {
            id: 3,
            name: 'N',
            age: 56
        }
    ];


    const columns = [
        {
            field:'name',
            title:'姓名'
        },
        {
            field:'age',
            title:'年龄'
        }

    ]

    /**
     *
     *   jquery版本的table实现
     * */

    function initTable() {

        /**
         *  initThead
         * */
        initTableHead();
        initTableBody();

    }

    function initTableBody() {
        const tableBody = $('<tbody></tbody>');


        for (let i=0;i<employees.length;i++){

            const tRow = $('<tr></tr>');
            /**
             *  如何结构化
             * */
            // const td_index = $('<td></td>').text(i+1);
            // const td_age = $('<td></td>').text(employees[i].age); // employees[i]['age']
            // const td_name = $('<td></td>').text(employees[i].name);

            const td_index = $('<td></td>').text(i+1);

            tRow.append(td_index);

           for (let j=0;j<columns.length;j++){

               if(columns[j].field){
                   const  tData =  $('<td></td>').text(employees[i][columns[j].field]); // employees[0]['age']
                   tRow.append(tData);
               }
           }

         //  tRow.append(td_index).append(td_age).append(td_name);

            tableBody.append(tRow);

        }




        $('#list').append(tableBody);
    }


    function initTableHead() {
        const theader = $('<thead></thead>');


        const tRowInHead = $('<tr></tr>');
        /*  const th_no = $('<th></th>').text('序号');
          const th_name = $('<th></th>').text('姓名');
          const th_age = $('<th></th>').text('年龄');*/

        for(let i=0;i<columns.length;i++){
            const  tableHeader = $('<th></th>').text(columns[i].title);
            tRowInHead.append(tableHeader);
        }

        theader.append(tRowInHead);
        //  tRowInHead.append(th_no).append(th_name).append(th_age);

        $('#list')
            .append(theader);
    }

    initTable();



    const app={
         data(){
             return {
                  data:employees,
                  columns:columns
             }
         }
    }


    Vue.createApp(app).mount('#app');



    /**
     *     v-for
     *        数组
     *            obj    in  arr
     *           （obj,index） in arr
     *        对象
     *             item in emp1
     *
     * */
</script>
</html>